import React, { useState } from 'react';
import {
  Button,
  Card,
  Col,
  Divider,
  Form,
  Input,
  message,
  Row,
  Select,
  Space,
  Spin,
  Upload,
} from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { genChartByAiUsingPost } from '@/services/gekbi/chartController';
import ReactECharts from 'echarts-for-react';

const Chart: React.FC = () => {
  const [chart, setChart] = useState<any>();
  const [option, setOption] = useState<any>();
  const [submitting, setSubmitting] = useState<boolean>(false);
  const onFinish = async (values: any) => {
    console.log(values);
    if (submitting) {
      return;
    }
    setSubmitting(true);
    const params = {
      ...values,
      file: '',
    };
    try {
      const res = await genChartByAiUsingPost(params, {}, values.file.file.originFileObj);
      if (!res?.data) {
        message.error('分析失败');
      } else {
        message.success('分析成功');
        console.log(res.data.genChart);
        const chartOption = JSON.parse(res.data.genChart ?? '');
        console.log('chartOption:' + chartOption);
        if (!chartOption) {
          throw new Error('分析失败');
        } else {
          setChart(res.data);
          setOption(chartOption);
        }
      }
    } catch (e: any) {
      alert(e.message);
      message.error('分析失败' + e.message);
    }
    setSubmitting(false);
  };
  return (
    <div className="chart">
      <Row gutter={24}>
        <Col span={12}>
          <Card title="智能分析">
            <Form onFinish={onFinish} labelAlign="left">
              <Form.Item name="goal" label="分析目标" required>
                <Input.TextArea />
              </Form.Item>
              <Form.Item name="name" label="图表名称" required>
                <Input />
              </Form.Item>
              <Form.Item name="chartType" label="选择图表" required>
                <Select
                  placeholder="请选择图表类型"
                  options={[
                    { value: '折线图', label: '折线图' },
                    { value: '柱状图', label: '柱状图' },
                    { value: '堆叠图', label: '堆叠图' },
                    { value: '饼图', label: '饼图' },
                    { value: '雷达图', label: '雷达图' },
                  ]}
                />
              </Form.Item>
              <Form.Item name="file" label="原始数据" required>
                <Upload name="file" maxCount={1}>
                  <Button icon={<UploadOutlined />}>上传文件</Button>
                </Upload>
              </Form.Item>

              <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
                <Space>
                  <Button type="primary" htmlType="submit">
                    Submit
                  </Button>
                  <Button htmlType="reset">reset</Button>
                </Space>
              </Form.Item>
            </Form>
          </Card>
        </Col>
        <Col span={12}>
          <Card title="分析结论">
            {chart?.genResult ?? <div>请先在左侧进行提交</div>}
            <Spin spinning={submitting} />
          </Card>
          <Divider />
          <Card title="可视化图表">
            {option ? <ReactECharts option={option} /> : <div>请先在左侧进行提交</div>}
            <Spin spinning={submitting} />
          </Card>
        </Col>
      </Row>
    </div>
  );
};
export default Chart;
